import '../homeStyle/ShebeiStyle/index.scss'
import SheBeiRTop from '@/component/SheBeiRTop'
import SheBeiRBottom from '@/component/SheBeiRBottom'
import React, { useEffect } from 'react'
// 引入scss 样式
import '@/views/homeStyle/ShebeiStyle/index.scss'
// 左侧第二个内容里面的数据 
import Quantity from '@/component/Quantity';
// 这是左侧第三个内容里面的数据
import Site from '@/component/Site';
import { getUserInfo } from '@/api';
import Hoc_login from '@/utils/Hoc_login'

function Shebei() {
  getUserInfo().then(res => {
    if (res.code === 1) {
      // message.success(res.msg)
    }
  })

  return (
    <>
      {/* 设备左侧 */}
      <div className="leftBox">
        {/* 左侧第一个 */}
        <div className='leftone'>
          {/* 左侧第一个标题 */}
          <img className='leftoneimg' src="../../public/icon/左.png" alt="" />
          <p className='leftoneP'>设备统计</p>
          {/* 左侧第一个内容 */}
          <div className='leftDl'>
            <dl>
              <dt> <img className='leftDlImg' src="../../public/icon/left-top-1.png" alt="" /></dt>
              <dd>监控类</dd>
            </dl>
            <dl>
              <dt> <img className='leftDlImg' src="../../public/icon/left-top-2.png" alt="" /></dt>
              <dd>消防类</dd>
            </dl>
            <dl>
              <dt> <img className='leftDlImg' src="../../public/icon/left-top-3.png" alt="" /></dt>
              <dd>其他类</dd>
            </dl>
          </div>
        </div>
        {/* 左侧第二个 */}
        <div className='lefttow'>
          {/* 左侧第二个标题 */}
          <img className='lefttowimg' src="../../public/icon/左.png" alt="" />
          <p className='lefttowP'>实时用电</p>
          {/* 左侧第二个中间内容 */}
          <div className='lefttowmain'>
            <dl>
              <dt><img className='lefttowdlimg' src="../../public/icon/water-1.jpg" alt="" /></dt>
              <dd>
                <h3>72670</h3>
                <p>总用电量(kw)</p>
              </dd>
            </dl>
            <dl>
              <dt><img className='lefttowdlimg' src="../../public/icon/water-1.jpg" alt="" /></dt>
              <dd>
                <h3>72670</h3>
                <p>总用电量(kw)</p>
              </dd>
            </dl>
          </div>
          {/* 左侧第二个内容里面的数据 */}
          <div style={{ width: '100%', height: '100%' }}>
            <Quantity />
          </div>
        </div>
        {/* 左侧第三个 */}
        <div className='leftbuttom'>
          {/* 左侧第三个标题 */}
          <img className='leftbuttomimg' src="../../public/icon/左.png" alt="" />
          <p className='leftbuttomP'>实时用电</p>
          {/* 左侧第三个内容里面的数据  */}
          <div style={{ width: '100%', height: '100%' }}>
            <Site />
          </div>
        </div>
      </div>
      <div className="cenetrBox"></div>
      <div className="rightBox">
        <div className="Tous">
          <SheBeiRTop></SheBeiRTop>
        </div>
        <div className='Bottoms'>
          <SheBeiRBottom></SheBeiRBottom>
        </div>
      </div>
    </>
  )
}

export default Hoc_login(Shebei)